<%@ page import="com.google.appengine.api.blobstore.BlobstoreServiceFactory" %> 
<%@ page import="com.google.appengine.api.blobstore.BlobstoreService" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Welcome</title>
        <style type="text/css" media="screen">
            @import "resources/css/custom-theme/jquery-ui-1.8.16.custom.css";
            @import "resources/css/screen.css";
            @import "resources/css/app.css";
            .dataTables_info { padding-top: 0; }
            .dataTables_paginate { padding-top: 0; }
            .css_right { float: right; }
            #example_wrapper .fg-toolbar { font-size: 0.8em }
            #theme_links span { float: left; padding: 2px 10px; }
        </style>
        <script type="text/javascript" src="resources/js/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="resources/js/jquery-ui-1.8.16.custom.min.js"></script>
        <script type="text/javascript" src="resources/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                oTable = $('#filetable').dataTable({
                        "aaSorting": [[ 0, "desc" ]],
                        "iDisplayLength": 500,
                        "bFilter": false,
                        "bLengthChange": false,
                        "bInfo": false,
                        "bJQueryUI": true
                });

                $(":button.delete").button().click(function(){
                    var row = $(this).parent().parent();
                    if(confirm("are you sure")){
                        $.post("upload",{action:"deletetask", id:this.id})
                        .success(function() {
                            row.remove();
                        })
                        .error(function(resp) {
                            alert("error deleting" + resp);
                        });
                    }
                });

                $(":button.process").button().click(function(){
                    var cell = $(this).parent();
                    cell.replaceWith("<td><img id='sbmspin' src='resources/images/ui-anim_basic_16x16.gif'/></td>");
                    $.post("upload",{action:"parse", id:this.id})
                    .success(function() {
                            $('#sbmspin').replaceWith('JOB SUBMITTED');
                        });
                });
            });
        </script>
    </head>
    <body>
        <%
            BlobstoreService blobstoreService = BlobstoreServiceFactory.getBlobstoreService();
        %>
        <div class="container">
            <div id="uploadformcontainer" class="span-22">
                <form action="<%= blobstoreService.createUploadUrl("/upload")%>" method="post" enctype="multipart/form-data">
                    <input type="file" name="myFile"/>
                    <input type="submit" value="Submit"/>
                </form>
            </div>
                <div id="filetablecontainer">
                    <table id="filetable">
                        <thead>
                            <tr>
                                <th>Date Uploaded</th>
                                <th>Name</th>
                                <th>Process</th>
                                <th>Races processed</th>
                                <th>Athletes processed</th>
                                <th>Results processed</th>
                                <th>Process Time</th>
                                <th>Errors</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <c:forEach var="file" items="${uploads}">
                                <tr>
                                    <td><fmt:formatDate value="${file.dateUploaded}" type="DATE" pattern="yyyy-MMM-dd"/></td>
                                    <td><c:out value="${file.name}"/></td>
                                    <td>
                                        <c:choose>
                                            <c:when test="${file.processed==true}">PROCESSED</c:when>
                                             <c:otherwise>
                                                 <button class="process" id="${file.id}">PROCESS</button>
                                             </c:otherwise>
                                        </c:choose>
                                    </td>
                                    <td>
                                        <c:out value="${file.racesProcessed}"/>
                                    </td>
                                    <td>
                                        <c:out value="${file.athletesProcessed}"/>
                                    </td>
                                    <td>
                                        <c:out value="${file.resultsProcessed}"/>
                                    </td>
                                    <td>
                                        <c:out value="${file.processTime/1000}"/>
                                    </td>
                                    <td>
                                        <c:out value="${file.errors}"/>
                                    </td>

                                    <td>
                                        <button class="delete" id="${file.id}">Delete</button>

                                    </td>
                                </tr>
                            </c:forEach>
                        </tbody>
                    </table>
                </div>
            <div class="span-5">
                <img src="http://code.google.com/appengine/images/appengine-noborder-120x30.gif" alt="Powered by Google App Engine" />
            </div>
        </div>
    </body>
 </html>
